import React from 'react';
import { Link } from 'react-router';
import { Breadcrumb, Button, Form, Input, Table, Row, Col, Select, Pagination,  DatePicker ,Message } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;


let List = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    getInitialState() {
        return {
            data: [],
            pagination: {
                currentPage: 1,
                pageSize: 10
            }
        }
    },

    componentDidMount() {
        this.handleSearch();
    },

    handleSearch() {
        this.setState({
          pagination: {
            currentPage: 1
          }
        })
        this.fetch();
    },
    handleReset() {
        this.props.form.resetFields();
    },
    fetch() {
        let page = this.state.pagination.currentPage;
        let forms = this.props.form.getFieldsValue();
        let params = Object.assign({}, { pageSize: 10, currentPage: page }, forms)
        let _me = this
        Utils.sendAjax({
            url: '/funder/statistics/list',
            data: JSON.stringify(params),
            callback: function (result) {
                if (result.code == '200') {
                    _me.setState({
                        data: result.data,
                        pagination: result.page
                    })
                }
            }
        })
    },

    rowKey(data) {
        return data.tenementId;
    },

    handleTableChange(pagination) {
        const pager = this.state.pagination;
        pager.currentPage = pagination.current;
        this.setState({
            pagination: pager
        });
        this.fetch();
    },

     // 获取详情
    getDetail(record){
        let _me = this;
        var tenementId={
            tenementId: record.tenementId,
        }
        Utils.sendAjax({
            url: '/funder/statistics/ownerDetail',
            data: JSON.stringify(tenementId),
            callback: function(result) {
                if (result.code == '200') {
                    let params = {
                        detailData: result.data
                    }
                    let goPathUrl = '/funder/fundCount/detail';
                    _me.context.router.push({pathname: goPathUrl, state: {...params,record}})

                } else {
                    Message.error(result.message, 10)
                }
            }
        })
    },
    // 获取出账信息
    getAccountInfo(record){
        let _me = this;
        let goPathUrl = '/funder/fundCount/outAccountInfo';
        _me.context.router.push({pathname: goPathUrl, state: {record}}) 
    },
    render () {
        const { getFieldProps } = this.props.form;


        const columns = [{
            title: '房源地址',
            dataIndex: 'address',
        }, {
            title: '物业名称',
            dataIndex: 'tenementName',
        }, {
            title: '房东姓名',
            dataIndex: 'realName',
        }, {
            title: '联系方式',
            dataIndex: 'mobilePhone',
        }, {
            title: '房间数量',
            dataIndex: 'roomCount',
        }, {
            title: '操作',
            dataIndex: '',
            render: (text,record) => {
                return (
                    <div>
                        <a href="javascript:;" onClick={this.getAccountInfo.bind(this, record) }>出账信息</a>&nbsp; |&nbsp;
                        <a href="javascript:;" onClick={this.getDetail.bind(this, record) }>详情</a>
                    </div>
                )
            }
        }];

        return (

            <div>
                <div style={{ padding: '10px' }}>
                    <Breadcrumb separator="-" >
                        <Breadcrumb.Item>资金统计</Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className="search-bar" style={{ padding: '10px 20px' }}>
                    <Form inline>
                        <FormItem label="房东姓名">
                            <Input {...getFieldProps('realName') } placeholder="房东姓名"/>
                        </FormItem>
                        <FormItem label="房源地址">
                            <Input {...getFieldProps('address') } placeholder="房源地址"/>
                        </FormItem>

                        <FormItem>
                            <Button type="primary" onClick={this.handleSearch} style={{ marginRight: 20 }}>查询</Button>
                            <Button type="default" onClick={this.handleReset}>重置</Button>
                        </FormItem>
                    </Form>
                </div>

                <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
                    onChange={this.handleTableChange} className="tableContainer"
                    pagination={this.state.pagination}/>
            </div>


        );
    }
});


List = Form.create()(List);
export default List